<template>
  <view :style="'max-height:'+window_height">
    <u-skeleton :animate="true" :loading="loading" :title="false">
      <uni-card>
        <view class="shop-item">
          <image :src="detail.headimg_url" mode="heightFix"></image>
          <view class="infos">
            <view class="dw-list-main-title">{{ detail.nickname }}</view>
            <view class="dw-list-sub-title">
              <text v-for="(c,ci) in detail.main_categories" :key="ci">{{ c }}</text>
            </view>
            <text class="dw-list-sub-title">上架商品
              <text class="dw-number">{{ detail.product_count }}</text>
              件
            </text>
          </view>
        </view>
        <view class="dw-sub-title">
          <navigator :url="'/pages/sharer/form?shop_id='+detail.shop_id+'&shop_name='+detail.nickname"
                     style="display: inline">
            <text class="u-primary">申请</text>
          </navigator>
          成为分享员，分享赚佣金！
        </view>
      </uni-card>

      <view style="padding: 15px">
        <u-search :animation="true" :showAction="true" actionText="搜索" placeholder="商品名称"></u-search>
        <u-list
            customStyle="margin-top: 15px;"
            @scrolltolower="scrollToLower"
        >
          <u-list-item
              v-for="(item, index) in product_list"
              :key="index"
          >
            <view class="product-item">
              <image :src="item.head_imgs[0]" mode="heightFix"></image>
              <view class="infos">
                <view class="dw-list-main-title">{{ item.title }}</view>
                <view class="dw-list-sub-title">
                  <template v-if="item.min_price === item.max_price">
                    <text class="dw-number">¥{{ item.min_price }}</text>
                  </template>
                  <template v-else class="dw-number">
                    <text class="dw-number">¥{{ item.min_price }} - ¥{{ item.max_price }}</text>
                  </template>
                </view>
                <view class="dw-list-sub-title">佣金
                  <text class="dw-number">{{ item.spec.commission_rate }}</text>
                  %
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </view>
    </u-skeleton>
  </view>
</template>

<script>

import {getShopDetail} from "@/api/shop";
import {getProductList} from "@/api/product";

export default {
  data() {
    return {
      loading: true,
      shop_id: 0,
      detail: {},
      product_list: [],
      next_key: '',
      has_more: true,
      window_height: 0,
    }
  },
  onLoad(options) {
    // 获取屏幕高度
    const sys_info = uni.getSystemInfoSync()
    this.window_height = sys_info.windowHeight
    this.shop_id = options.shop_id
    this.getShopDetail()
  },
  watch: {
    detail(newValue) {
      if (newValue.shop_id) {
        this.getProductList()
      }
    },
  },
  methods: {
    // 获取店铺详情
    getShopDetail() {
      getShopDetail(this.shop_id).then(res => {
        console.log(res)
        this.detail = res
        this.loading = false
      })
    },
    // 获取店铺商品列表
    getProductList() {
      if (!this.detail.shop_id) {
        return;
      }
      getProductList({
        site_id: this.detail.site_id,
        shop_id: this.detail.shop_id,
        next_key: this.next_key,
        page_size: 20,
      }).then(res => {
        console.log("店铺商品列表：", res)
        this.product_list = this.product_list.concat(res.list)
        this.next_key = res.next_key
        this.has_more = Boolean(res.has_more)
      })
    },
    scrollToLower() {
      if (!this.has_more) {
        return
      }
      this.getProductList()
    },
  }
}
</script>

<style lang="scss" scoped>

.shop-item, .product-item {
  display: flex;
  flex-direction: row;
  align-items: center;

  image {
    height: 100px;
    border-radius: 4px;
  }

  .infos {
    padding-left: 10px;
  }
}

.product-item {
  margin-bottom: 10px;
  margin-left: 30px;

  .infos {
    padding-left: 20px;

    .dw-list-main-title {
      padding-bottom: 10px;
    }

    .dw-list-sub-title {
      padding-bottom: 5px;
    }
  }
}
</style>
